<template>
  <!-- 只有在 frontmatter.comment !== false 时才显示评论 -->
  <Waline
    v-if="showComment"
    :serverURL="serverURL"
    :path="path"
    :dark="dark"
    :reaction="false"
  />
</template>

<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute, useData } from 'vitepress';
import '@waline/client/style';

const { page } = useData(); // 获取 frontmatter
const serverURL = 'https://waline.vercel.app';
const path = computed(() => useRoute().path);
const dark = 'html[class="dark"]';

// 判断是否显示评论
const showComment = computed(() => page.value.frontmatter.comment !== false);
</script>

<style scoped>
[data-waline] {
  --waline-theme-color: var(--vp-c-brand);
  --waline-active-color: var(--vp-c-brand);
}

:deep(.wl-emoji-popup, .wl-gif-popup) {
  z-index: 99;
}
</style>

